<template>
      <div class="place-order">
        <router-link :to="{ name: 'address', params: { select: 'select' } }" class="weui-cell weui-cell_access order-cell address-cell" >
            <div class="weui-cell__bd">
                <p class="shr" >收货人：{{ address.user }}   <span class="tel" >{{ address.tel }}</span></p>
                <p class="address" ><i class="icon iconfont icon-address"></i> {{ address.info }}</p>
            </div>
            <div class="weui-cell__ft"></div>
        </router-link>

        <div v-if="product" class="po-pane">
            <div class="po-pane-h">
                <div class="po-pane-hl">
                    <img :src="product.user.avatar" alt="" class="store-img">
                    <span class="store-name">
                        {{ product.user.name }}
                    </span>
                </div>
                <div class="po-pane-hr">
                    <a class="calltel" :href="'tel:' + product.user.telphone">联系卖家</a>
                </div>
            </div>

            <div class="po-pane-b">
                <div class="prod-info">
                    <div class="prod-img">
                        <img :src="product.cover_image_url" alt="" srcset="">
                    </div>
                    <div class="prod-detail">
                        {{ product.name }}  {{ product.info }}
                    </div>
                </div>
                <div class="prod-qty boder-b">
                    <div class="qty-label">
                        购买数量
                    </div>
                    <div class="qty-input">
                        <input class="weui-input" type="number" v-model="nend_qyt" placeholder="">
                    </div>
                    <div class="qty-unit">
                        {{  product.unit }}
                    </div>
                </div>
                <div class="prod-price">
                    <div class="price-label">
                        货品价格
                    </div>
                    <div class="price-value">
                         {{  product.price }}元 / {{  product.unit }} <span class="price-limit">2000{{  product.unit }}起批</span>
                    </div>
                </div>
                <div class="prod-tips boder-b">
                    以上价格不含运费，可能与最终成交金额有偏差，购买前请与供应商充分沟通了解详情。
                    <a class="calltel" :href="'tel:' + product.user.telphone">电话联系</a>
                </div>
                <div class="prod-message">
                    <div class="message-label">
                        买家留言
                    </div>
                    <div class="meesage-box">
                        <textarea class="weui-textarea" placeholder="" v-model="message" rows="2"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="po-check-out">
            <div class="po-check-out-amount">
                ¥ {{ amount }}
            </div>
            <div @click="haddleCreateOrder" class="po-check-out-aciont">
                立即下单
            </div>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
    data() {
        return {
            pid: this.$route.params.pid,
            address_id: 0,
            address: {
                user: '',
                tel: '',
                info: ''
            },
            product: null,
            nend_qyt: 200,
            message: ''
        }
    },
    created() {
        self = this
        console.log(this.$route)
        // function pushHistory() { 
        //     var state = { 
        //         title: "title", 
        //         url: "#/orderCreate/101" 
        //     }; 
        //     window.history.pushState(state, "title", "#/orderCreate/103"); 
        // }

        // pushHistory(); 
        // var bool=false; 
        // setTimeout(function(){ 
        //     bool=true; 
        // },1500); 
        window.addEventListener("popstate", function(e) { 
            if(self.$route.name === 'orderCreate') {
                window.location.href = '/product/show/104'
            }
            //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 
            //pushHistory(); 
        }, false); 
        
        Cookies.set('ORDER-PID', this.pid) // 手动设置地址
        // 商品信息
        this.getProduct()

        const address_set = Cookies.get('SET-ADDRESS') // 手动设置地址
        if (address_set) {
            // 手动设置了地址就获取指定地址
            this.address_id = address_set
            this.getAddress()
        }else {
            // 获取默认地址
            this.getAddressDefault()
        }
    },
    methods: {
        // 获取默认地址
        getAddressDefault() {
            axios.get('/address/default').then(response => {
                const res = response.data
                if(res.status === 'success') {
                    this.address.user = res.data.contact_name
                    this.address.tel = res.data.contact_tel
                    this.address.info = res.data.area + res.data.address
                }
            }).catch( err => {
                console.log(err)
            });
        },
        // 获取指定地址
        getAddress() {
            axios.get('/address/' + this.address_id)
                .then(response => {
                    const res = response.data
                    if(res.status === 'success') {
                        this.address.user = res.data.contact_name
                        this.address.tel = res.data.contact_tel
                        this.address.info = res.data.area + res.data.address
                    }
                }).catch( err => {
                    console.log(err)
                }); 
        },
        // 获取商品信息
        getProduct() {
            axios.get('/product/fetchDetail/' + this.pid)
                .then(response => {
                    const res = response.data
                    if(res.status === 'success') {
                        this.product = res.data
                    }
                }).catch(err => {
                    console.log(err)
                })

        },
        haddleCreateOrder() {
            axios.post('/order/create', {
                pid: this.pid,
                aid: this.address_id,
                qty: this.nend_qyt,
                message: this.message
            }).then(response => {
                const res = response.data
                if (res.status === 'success') {
                    window.location.href = '/member/orderShow/' + res.data;
                }   
            })
        }
    },
    computed: {
        amount: function() {
            return this.product ? (this.nend_qyt * this.product.price).toFixed(2) : 0
        }
    }
}
</script>
